<template>
  <!-- 财务移库审批-全部 -->
  <div class="ccui-app-container">
    <div class="ccui-advanced-search-wrapper ccui-clearfix">
      <el-search
        ref="search"
        :formProp="filter"
        @search="search"
        :isShow="isShow"
        @resetForm="resetForm"
      >
        <!-- tab切换 -->
        <div class="ccui-tab-wrapper">
          <el-button
            type="table-top-active"
            size="mini"
            @click="jumpRoute('全部')"
            >全部（{{ page.total }}）</el-button
          >
          <el-button type="table-top" size="mini" @click="jumpRoute('待审批')"
            >待审批</el-button
          >
          <el-button type="table-top" size="mini" @click="jumpRoute('已审批')"
            >已审批</el-button
          >
        </div>
        <!-- 单行搜索 -->
        <template slot="search">
          <el-input
            v-model="filter.moveInventoryName"
            clearable
            searchLabel="移库单名称"
            placeholder="请输入移库单名称模糊查询"
            @blur="handleTrim('moveInventoryName')"
          ></el-input>

          <el-input
            v-model="filter.moveInventoryCode"
            clearable
            searchLabel="移库单编号"
            placeholder="请输入移库单编号模糊查询"
            @blur="handleTrim('moveInventoryCode')"
          ></el-input>

          <el-input
            v-model="filter.reportInOrgName"
            clearable
            searchLabel="填报单位"
            placeholder="请输入填报单位模糊查询"
            @blur="handleTrim('reportInOrgName')"
          ></el-input>
          <el-input
            v-model="filter.originalWarehouseName"
            clearable
            searchLabel="原仓库"
            placeholder="请输入原仓库模糊查询"
          ></el-input>
          <el-input
            v-model="filter.targetWarehouseName"
            clearable
            searchLabel="目标仓库"
            placeholder="请输入目标仓库模糊查询"
          ></el-input>
          <el-select
            v-model="filter.status"
            searchLabel="审批状态"
            placeholder="请选择状态查询"
          >
            <el-option label="已审批" value="1"> </el-option>
            <el-option label="待审批" value="0"> </el-option>
          </el-select>
        </template>
        <!-- 展开后多个搜索 -->
        <el-input
          v-model="filter.moveInventoryName"
          clearable
          slot="searchItem4"
          searchLabel="移库单名称"
          placeholder="请输入移库单名称模糊查询"
          @blur="handleTrim('moveInventoryName')"
        ></el-input>

        <el-input
          v-model="filter.moveInventoryCode"
          clearable
          slot="searchItem41"
          searchLabel="移库单编号"
          placeholder="请输入移库单编号模糊查询"
        ></el-input>

        <el-input
          v-model="filter.reportInOrgName"
          clearable
          slot="searchItem92"
          searchLabel="填报单位"
          placeholder="请输入填报单位模糊查询"
          @blur="handleTrim('reportInOrgName')"
        ></el-input>
        <el-input
          v-model="filter.originalWarehouseName"
          clearable
          slot="searchItem1"
          searchLabel="原仓库"
          placeholder="请输入原仓库模糊查询"
        ></el-input>
        <el-input
          v-model="filter.targetWarehouseName"
          searchLabel="目标仓库"
          clearable
          slot="searchItem2"
          placeholder="请输入目标仓库模糊查询"
        ></el-input>
        <el-select
          slot="searchItem6"
          v-model="filter.status"
          searchLabel="审批状态"
          placeholder="请选择状态查询"
        >
          <el-option label="已审批" value="1"> </el-option>
          <el-option label="待审批" value="0"> </el-option>
        </el-select>
      </el-search>
    </div>

    <!-- 表格 -->
    <div class="ccui-multifunctional-table-wrapper">
      <el-table
        v-loading="loading"
        :data="tableData"
        border
        :cell-style="cellStyle"
      >
        <el-table-column label="序号" width="60" fixed>
          <template slot-scope="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="移库单编号" width="200" fixed>
          <template slot-scope="scope">
            <el-button
              @click="view(scope.row, scope.$index, 'pending')"
              type="text"
              >{{ scope.row.businessData.moveInventoryCode }}</el-button
            >
          </template>
        </el-table-column>
        <template v-for="(table, index) in tableColumnData">
          <el-table-column
            :fixed="table.fixed || false"
            :type="table.type"
            :key="index"
            :label="table.label"
            :min-width="table.width"
            :prop="table.prop"
            :filters="table.filters"
            :show-overflow-tooltip="true"
            :align="table.align"
            :header-align="table.headerAlign || 'left'"
            :formatter="table.formatter"
          ></el-table-column>
        </template>
      </el-table>

      <!-- 分页 -->
      <div class="table-footer">
        <div class="ccui-table-footer">
          <div id="ccui-paging">
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="page.pageNo"
              popper-class="ccui-paging-page-size-popper"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="page.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="page.total"
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getList } from "./api";

export default {
  name: "arrival-check-list",
  data() {
    return {
      loading: false,
      isShow: false, // 搜索展开收起控制
      filter: {}, // 搜索集合
      searchValue: {},
      isFocus: 1, // 默认选中tab
      page: {
        pageNo: 1,
        pageSize: 10,
        total: 0
      },
      tableData: [],
      tableColumnData: [
        // {
        //   label: "序号",
        //   type: "index",
        //   fixed: true
        // },
        // {
        //   label: "移库单编号",
        //   prop: "businessData.moveInventoryCode",
        //   fixed: true,
        //   width: 200
        // },
        {
          label: "审批类型",
          prop: "todoData.businessBillTypeName",
          width: 250
        },
        {
          label: "移库单名称",
          prop: "businessData.moveInventoryName",
          width: 150
        },
        { label: "填报单位", prop: "businessData.reportInOrgName", width: 200 },
        {
          label: "原仓库名称",
          prop: "businessData.originalWarehouseName",
          width: 200
        },
        {
          label: "目标仓库名称",
          prop: "businessData.targetWarehouseName",
          width: 200
        },
        {
          label: "是否跨项目",
          prop: "isAcrossProject",
          width: 80
        },
        {
          label: "移库数量",
          prop: "businessData.moveInventoryCountString",
          width: 80
        },
        {
          label: "移库金额",
          align: "right",
          prop: "businessData.moveInventoryMoneyString",
          width: 100
        },
        {
          label: "编制人",
          prop: "businessData.reportUsername"
        },
        {
          label: "编制日期",
          prop: "businessData.reportTime",
          width: 100,
          formatter: this.formatterDate
        },
        {
          label: "审批状态",
          prop: "todoData.workItemStatusString",
          width: 80
        }
      ]
    };
  },
  activated() {
    this.getData();
  },
  deactivated() {
    this.$refs.search.resetForm();
  },

  components: {},
  methods: {
    // 获取列表数据
    getData() {
      getList({ ...this.page, ...this.searchValue }).then(res => {
        const { rows, recordsTotal } = res.data.data;
        this.tableData = rows;
        this.page.total = recordsTotal;
      });
    },
    // 查看
    view(row, index, from) {
      const { todoData, businessData } = row;
      const { businessBillTypeCode } = todoData;
      const { id } = businessData;
      const jumpInformation = {
        S0409: { states: "move-store-detail" }
      };

      this.$router.push({
        path: `/inventoryManagement/move-examine/move-examine-approve`,
        // path: `/inventoryManagement/move-store/detail`,
        query: {
          id,
          ...jumpInformation[businessBillTypeCode],
          // name: billName,
          from
        }
      });
    },
    // 导航跳转
    jumpRoute(menuName) {
      switch (menuName) {
        case "全部":
          this.$router.push({
            path: "/inventoryManagement/move-examine/all"
          });
          break;
        case "待审批":
          this.$router.push({
            path: "/inventoryManagement/move-examine/await-examine"
          });
          break;
        case "已审批":
          this.$router.push({
            path: "/inventoryManagement/move-examine/already-examine"
          });

          break;
      }
    },

    // 表格样式
    cellStyle({ row, column, rowIndex, columnIndex }) {
      if (column.label == "验收单编号") {
        return { color: "#0089EF", cursor: "pointer" };
      }
    },
    // 表格编辑
    handleEdit(row) {},
    // 搜索回调
    search(searchVal) {
      this.searchValue = JSON.parse(JSON.stringify(searchVal));
      this.page.pageNo = 1;
      this.getData();
    },
    // 重置回调
    resetForm() {
      this.filter = {};
    },

    //  展示条数
    handleSizeChange(val) {
      this.page.pageSize = val;
      this.getData();
    },
    // 当前页
    handleCurrentChange(val) {
      this.page.pageNo = val;
      this.getData();
    },
    // 清空名称空格
    handleTrim(key) {
      this.$set(
        this.filter,
        key,
        this.filter[key].replace(/(^\s*)|(\s*)$/g, "")
      );
    },
    // 格式化时间
    formatterDate(data) {
      return data.businessData.reportTime.split(" ")[0];
    },

    // 是否跨项目格式化
    isAcrossProjectFormatter(data) {
      let str = { 0: "否", 1: "是" };
      return str[data.businessData.isAcrossProject]
        ? str[data.businessData.isAcrossProject]
        : "";
    }
  }
};
</script>
<style lang="scss" scoped>
/deep/.ccui-multifunctional-table-wrapper {
  height: 100%;
}
</style>
